<template>
  <div id="lsdd-list">
    <div>
      <el-select
        style="width: 40vw"
        v-model="selectValue"
        placeholder="请选择客户"
        @change="onSelectChange"
        :disabled="selectDisable"
      >
        <el-option
          v-for="item in selectOptions"
          :key="item.customerId"
          :label="item.customerName"
          :value="item.customerId"
        >
        </el-option>
      </el-select>
    </div>
    <br />
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      highlight-current-row
      height="60vh"
    >
      <el-table-column
        :resizable="false"
        prop="shippingAddress"
        label="送货地址"
        width="320"
        fixed
      >
      </el-table-column>

      <el-table-column
        :resizable="false"
        prop="ordersId"
        label="编号"
        width="50"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="ordersDate"
        label="日期"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="ordersAmount"
        label="订单金额"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="orderStatus"
        label="订单状态"
        width="140"
      >
      </el-table-column>

      <el-table-column
        :resizable="false"
        fixed="right"
        label="操作"
        width="160"
      >
        <template slot-scope="scope">
          <div v-if="false || scope"></div>
          <!-- v-if="scope.row.oppStateId == 1001" -->
          <el-button size="mini" type="success" disabled>修改</el-button>
          <!-- @click="handleEdit(scope.$index, scope.row)" -->
          <el-button slot="reference" size="mini" type="danger" disabled
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="pageCount"
        hide-on-single-page
        @current-change="onChangePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageCount: 0,
      selectValue: null,
      selectOptions: null,
      selectTid: false,
      loading: false,
      selectDisable: true,
      tableData: null,
    };
  },
  created: function () {
    this.$axios({
      method: "post",
      crossdomain: true,
      url: "/customer/list",
    }).then((response) => {
      //   console.log(response.data.data[0]); //请求成功返回的数据
      this.selectOptions = response.data.data[0];
      //   console.log(this.tableData);
      this.selectDisable = false;
    });
  },
  methods: {
    onSelectChange(opt,pageC) {
      pageC = pageC || 1,
      // console.log("select", opt);
      this.loading = true;
      this.selectDisable = true;
      this.$axios({
        method: "post",
        crossdomain: true,
        url: "/orders/list/" + opt + "?page=" +  pageC,
        // data: {page: pageC},//this.$qs.stringify
      }).then((response) => {
        // console.log(response.data.data[0]); //请求成功返回的数据 列表信息
        this.tableData = response.data.data[0].data;
        this.pageCount = response.data.data[0].count;
        // console.log(this.tableData);
        this.loading = false;
        this.selectDisable = false;
        this.selectTid = true;
      });
    },
    onChangePage(page) {
      console.log("page", page);
      this.onSelectChange(this.selectValue,page);
    },
  },
};
</script>
